<template>
  <h1 class="font">windicss 演示</h1>
  <h2>单位</h2>
    <h3>vh vs %</h3>
    <div class="w-200px h-200px bg-cyan-100">
      <div class="bg-orange-200 min-h-[50%]">1</div>
    </div>
  <h2>Typography 排版</h2>
  <div class="text-40px">text-40px</div>
  <h2>交互 interactivity</h2>
  <h3>cursor</h3>
  <div class="dark">
    <div class="bg-cyan-200 cursor-pointer hover:bg-[#0bf] dark:hover:bg-[#0fb]">
      cursor-pointer
    </div>
  </div>
  <h2>Spacing</h2>
  <a href="https://windicss.org/utilities/layout/spacing.html" class="text-blue-500"
    >windicss space</a
  >
  <h3>Padding</h3>
  <div class="bg-blue-200 w-200px">origin</div>
  <div class="bg-orange-200 w-200px pl-100px">pl-200px</div>
  <div class="bg-green-200 w-200px pr-100px">pl-200px</div>
  <div class="bg-pink-200 w-200px px-10px">pl-200px</div>
  <h3>Margin</h3>
  <div class="bg-orange-200 w-100px ml-auto">ml-auto</div>
  <div class="bg-orange-200 w-100px mr-auto">mr-auto</div>
  <div class="bg-orange-200 w-100px mx-auto">mx-auto</div>
  <h2>Layout</h2>
  <h3>Flexbox</h3>
  <h4>flex</h4>
  <div class="w-300px h-100px bg-gray-100 flex justify-between items-center">
    <div class="w-30px bg-red-300 m-1">1</div>
    <div class="w-30px bg-red-300 m-1">1</div>
    <div class="w-30px bg-red-300 m-1">1</div>
    <!-- <div class="w-30px bg-red-300 m-1">1</div> -->
    <!-- <div class="w-30px bg-red-300 m-1">1</div> -->
    <!-- <div class="w-30px bg-red-300 m-1">1</div> -->
  </div>
  <h4>flex-1 & overflow-hidden</h4>
  <div class="w-200px h-100px bg-gray-100 flex items-center">
    <div class="w-10px bg-red-300 m-1 flex-1 overflow-hidden">123456789abcdefg</div>
    <div class="w-30px bg-red-300 m-1 flex-1">1</div>
    <div class="w-30px bg-red-300 m-1 flex-1">1</div>
  </div>
  <h4>flex-col</h4>
  <div class="w-200px h-100px bg-gray-100 flex flex-col items-stretch">
    <div class="bg-red-300 m-1">1</div>
    <div class="bg-red-300 m-1">1</div>
  </div>
  <h4>inline-flex</h4>
  <div class="inline-flex justify-center bg-gray-200 h-100px items-center">
    <div class="w-30px bg-red-300 m-1">1</div>
    <div class="w-30px bg-red-300 m-1">1</div>
    <div class="w-30px bg-red-300 m-1">1</div>
    <div class="w-30px bg-red-300 m-1">1</div>
  </div>
  <h4>absolute</h4>
  <!-- <div class="bg-green-200 absolute left-0 top-0 justify-center items-center w-full h-full">
    absolute
  </div> -->
  <div class="bg-green-200 absolute left-0 top-0">absolute-lt</div>
  <div class="bg-green-200 absolute right-0 top-0">absolute-rt</div>
  <div class="bg-green-200 absolute left-0 bottom-0">absolute-lb</div>
  <div class="bg-green-200 absolute right-0 bottom-0">absolute-rb</div>
  <!-- <div class="bg-purple-400 absolute-center"></div> -->
  <h4>whitespace-nowrap</h4>
  <div class="bg-pink-200 whitespace-nowrap overflow-ellipsis"></div>
  <h2>任意值类</h2>
  <div class="bg-gray-200 w-[222px]">w-[222px]</div>
  <div class="bg-orange-100 w-250px">w-250px</div>
  <h2>windi.config.ts 配置</h2>
  <h3>主题配置的使用</h3>
  <span class="text-success">text-success</span>
  <span class="text-brand-2">text-brand-2</span>
  <span class="bg-brand-1">bg-brand-1</span>
  <h2>颜色演示</h2>
  <div class="bg-red-300">演示背景颜色 bg-red-300</div>
</template>

<script setup lang="ts"></script>

<style scoped>
/* h1 {
  font-size: 2.5rem;
  font: bold;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.1rem;
}
a {
  color: blue;
  text-decoration: underline;
} */
</style>
